<template>
	<div>
		<div>
			<!-- 书页容器 -->
			<div ref="pageRef" class="pic">
				<img :src="images[currentPage]" style="height: 450px;" :class="{ 'fade-animation': isAnimating }">
			</div>

			<!-- 翻页按钮 -->
			<button v-if="currentPage < images.length - 1" @click="nextPage" class="xiayiye">
				下一页
			</button>
			<!-- <el-button type="primary" plain v-if="currentPage < images.length - 1" @click="nextPage>下一页</el-button> -->

			<!-- 重置按钮 -->
			<button v-if=" currentPage===images.length - 1" @click="resetBook" class="chongxin">
				重新开始
			</button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';

	// 图片路径数组
	const images = [
		'/static/技艺/1.jpg',
		'/static/技艺/2.jpg',
		'/static/技艺/3.jpg',
		'/static/技艺/4.jpg',
		'/static/技艺/5.jpg',
		'/static/技艺/6.jpg',
		'/static/技艺/7.jpg',
		'/static/技艺/8.jpg',
		'/static/技艺/9.jpg',
		'/static/技艺/10.jpg',
		'/static/技艺/11.jpg'
	];

	// 状态管理
	const currentPage = ref(0);
	const pageRef = ref(null);
	const isAnimating = ref(false);

	// 下一页函数
	const nextPage = async () => {
		if (currentPage.value >= images.length - 1) return;

		// 开始动画
		isAnimating.value = true;

		// 等待动画完成
		await new Promise(resolve => setTimeout(resolve, 500));

		// 更新图片
		currentPage.value += 1;

		// 结束动画
		isAnimating.value = false;
	};

	// 重置书籍
	const resetBook = async () => {
		if (currentPage.value === 0) return;

		// 开始动画
		isAnimating.value = true;

		// 等待动画完成
		await new Promise(resolve => setTimeout(resolve, 500));

		// 重置到第一页
		currentPage.value = 0;

		// 结束动画
		isAnimating.value = false;
	};

	// 页面加载时初始化
	// onMounted(() => {
	// 	// 添加阴影效果增强3D感
	// 	if (pageRef.value) {
	// 		pageRef.value.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.1)';
	// 	}
	// });
</script>

<style scoped>
	.pic {
		margin: 10px 0;
		height: 450px;
		text-align: center;
	}

	/* 定义渐隐渐显动画 */
	@keyframes fade {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	/* 应用动画 */
	.fade-animation {
		animation: fade 0.5s ease-in-out;
	}

	.xiayiye {
		width: 50%;
		border-radius: 10px;
		color: #409eff;
		background-color: #ecf5ff;
		border: 1px solid #409eff;
	}

	.chongxin {
		width: 50%;
		border-radius: 10px;
		color: #e7a542;
		background-color: #fdf6ec;
		border: 1px solid #f3d19e;
	}

	/* 按钮悬停效果 */
	button:hover {
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
		transform: translateY(-2px);
	}
</style>